<template>
  <el-card class="order-card"  v-for="(item,index) in orderInfo" :key="index">
    <div class="order-item">
      <span class="order-label">订单号:</span>
      <span class="order-value" style="color: red;font-size: 10px">{{item.orderNumber }}</span>
    </div>
    <div class="order-item">
      <span class="order-label">门票类型:</span>
      <span class="order-value">{{ item.ticketType }}</span>
    </div>
    <div class="order-item">
      <span class="order-label">数量:</span>
      <span class="order-value">{{ item.quantity }}</span>
    </div>
    <div class="order-item">
      <span class="order-label">总价:</span>
      <span class="order-value">{{ item.totalPrices }}</span>
    </div>

    <div class="order-item">
      <span class="order-label">下单时间:</span>
      <span class="order-value">{{ item.data }}</span>
    </div>
  </el-card>
</template>

<script setup>
import {defineComponent, reactive, ref} from 'vue';
import { ElCard } from 'element-plus';
import axios from "axios";
import ip from "@/router/ip.js";



    const orderInfo = ref([
      {orderNumber: '123456789', ticketType: '成人票', quantity: 2, totalPrice: '200元'},

    ])


 let init=async () => {
   let username = JSON.parse(localStorage.getItem("user")).username
   console.log(username)
  let {data}= await axios.get(ip + "get_pay", {
     params: {
       username: username,
     }
   })

   orderInfo.value= data;
 }
 init();


</script>

<style scoped>
.order-card {
  //width: 90%;
  margin: 40px auto;
  padding: 10px;
}
.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.order-label {
  font-weight: bold;
}

</style>